<template>
    <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
      <el-radio-button :label="false">expand</el-radio-button>
      <el-radio-button :label="true">collapse</el-radio-button>
    </el-radio-group> -->
    <el-menu class="el-menu-vertical-demo" :collapse="isCollapse" background-color="#fff" active-text-color="#000"
        text-color="#000" collapse-transition="false" @open="handleOpen" @select="handleSelect" @close="handleClose"
        unique-opened="true" :router="true">
        <section v-for="(item, index) in list">
            <el-sub-menu v-if="item.children.length > 0" :index="index">
                <template #title>
                    <el-icon>
                        <component :is="item.icon" />
                    </el-icon>
                    <span>{{ item.label }}</span>
                </template>
                <el-menu-item class="m-menu" v-for="(it, idx) in item.children" :index="it.path">{{ it.label
                }}</el-menu-item>
            </el-sub-menu>
            <el-menu-item v-if="item.children.length == 0" :index="item.path">
                <template #title>
                    <el-icon>
                        <component :is="item.icon" />
                    </el-icon>
                    <span>{{ item.label }}</span>
                </template>
            </el-menu-item>
        </section>
    </el-menu>
</template>
  
<script>
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm } from "element-plus";
import {
    Location,
    Document,
    Menu as IconMenu,
    Setting,
    Avatar,
    User, ChatDotRound, Monitor, Delete,
    Guide,
    Wallet, OfficeBuilding, Headset,
    Medal, Histogram,
    Sunrise, Postcard, HelpFilled, Van, School, Notebook, Tickets
} from "@element-plus/icons-vue";

export default {
    name: "Header",
    data() {
        return {
            isCollapse: false,
            list: []
        };
    },
    components: {
        Location,
        Document, ChatDotRound, Headset,
        IconMenu, Histogram, Monitor, Delete,
        Setting,
        Avatar,
        User,
        Guide,
        Wallet,
        Medal, OfficeBuilding,
        Sunrise, Postcard, HelpFilled, Van, School, Notebook, Tickets
    },
    mounted() {
        this.getTreeData();
    },
    methods: {
        handleOpen(key, keyPath) { },
        handleClose(key, keyPath) { },
        handleSelect(index, indexPath) { },
        openOrClose() {
            if (this.isCollapse) {
                this.isCollapse = false;
            } else {
                this.isCollapse = true;
            }
        },
        getTreeData() {
            httpService("/javaApi/baseMenu/queryMyTree", { "systemCode": "6004" }, "get").then((data) => {
                this.list = data[0].children;
            });
        },
    },
};
</script>
  
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 240px;
    min-height: calc(100vh - 60px);
    padding: 10px;
    /* back dground: coral; */
}

.el-menu--collapse {
    min-height: calc(100vh - 60px);
}

.el-aside {
    transition: width 0.05s;
    -webkit-transition: width 0.05s;
    -moz-transition: width 0.05s;
    -webkit-transition: width 0.05s;
    -o-transition: width 0.05s;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 240px;
    height: 100%;
}

.el-menu-item.is-active {
    color: #409EFF;
    background: white;
}

.m-menu.is-active {
    color: #409EFF;
    background: white;
    padding-left: 40px !important;
}

.m-menu:before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    border: 1px solid #444;
    position: absolute;
    left: 25px;
    top: 23px;
}

.m-menu.is-active:before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: none;
    background: #409EFF;
    position: absolute;
    left: 25px;
    top: 23px;
}
</style>